<script setup lang="tsx">

import { computed, reactive } from 'vue';
import { PageEntity } from '@/entity/page.entity';
import { useTable } from '@/hooks/common/table';
import { postAction } from '@/service/request/action';
import { getHoursRecordPageApi } from '@/service/path/train/hours-record';
import HoursRecordSearch from '@/views/train/hours-record/modules/hours-record-search.vue';
import { getSourceUrl } from '@/service/request';

const state = reactive({
  pageInfo: new PageEntity(),
  typeMap: {
    1: '添加课时',
    2: '扣除课时'
  }
});
const {
  columns,
  columnChecks,
  data,
  loading,
  mobilePagination,
  searchParams,
  getData,
  changeSort,
  clickSearch,
  clickReset
} = useTable({
  apiFn: () => postAction(getHoursRecordPageApi, state.pageInfo),
  showTotal: true,
  immediate: true,
  apiParams: {
    studentName: '',
    type: null as number,
    operator: ''
  },
  pageInfo: state.pageInfo,
  columns: () => [
    {
      title: '序号',
      key: 'index'
    },
    {
      title: '类型',
      key: 'type',
      render: (row: Api.Train.HoursRecord) => {
        return state.typeMap[row.type];
      }
    },
    {
      title: '作业图片',
      key: 'workImgId',
      render: (row: Api.Train.HoursRecord) => {
        return row.workImgSourceList.map(item => {
          return <n-image src={getSourceUrl(item)} width="50" />
        });
      }
    },
    {
      title: '学生姓名',
      key: 'studentName'
    },
    {
      title: '操作课时数',
      key: 'operateHours'
    },
    {
      title: '剩余课时数',
      key: 'remainHours'
    },
    {
      title: '备注',
      key: 'remark'
    },
    {
      title: '操作人',
      key: 'operator'
    },
    {
      title: '操作时间',
      key: 'createTime',
      sorter: true
    }
  ]
});
const typeList = computed(() => {
  const dataList = [];
  for (const key in state.typeMap) {
    dataList.push({
      label: state.typeMap[key],
      value: ~~key
    });
  }
  return dataList;
})
</script>

<template>
  <div class="flex-col-stretch gap-16px lt-sm:overflow-auto">
    <HoursRecordSearch v-model:model="searchParams" @click-reset="clickReset" @click-search="clickSearch" :type-list="typeList" />
    <n-card title="课时记录列表" class="flex-1">
      <template #header-extra>
        <TableHeaderOperation
            v-model:columns="columnChecks"
            :loading="loading"
            :add-btn="false"
        />
      </template>
      <n-data-table
          :columns="columns"
          :data="data"
          :loading="loading"
          remote
          :row-key="row => row.id"
          :pagination="mobilePagination"
          :on-update:sorter="changeSort"
          class="sm:h-full"
          flex-height
      />
    </n-card>
  </div>
</template>

<style scoped>

</style>
